<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>东单办公系统-部门列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
    <script src="media/js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
<div class="layui-container">
    <table id="tbdata" lay-filter="tbop"></table>
    <script type="text/html" id="barop">
        <a class="layui-btn layui-btn-normal" lay-event="detail">详情</a>
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    </script>
</div>

<div id="main" style="width: 600px;height:400px;position:center;"></div>
<script type="text/javascript">
    var names;
    var count;

    var option;
    $(function () {
        $.ajax({
            type:"post",
            url:"departlist.do",
            success:function (date) {
                if (date.code==1){
                    names= date.name
                    count= date.count
                    console.log(names)
                    console.log(count)



    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '部门人数统计'
        },
        tooltip: {},
        legend: {
            data: ['部门']
        },
        xAxis: {
            data: names
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: count
        }]
    };
                    myChart.setOption(option);
                }

            }



        })
    })

    // 使用刚指定的配置项和数据显示图表。

</script>
<script src="media/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#tbdata',
            url: 'departpage.do' //数据接口
            ,
            page: true //开启分页
            ,
            cellMinWidth: 60,
            cols: [[ //表头
                {type: 'checkbox'},
                {
                    field: 'id',
                    title: '序号',
                    sort: true,
                    fixed: 'left'
                }, {
                    field: 'name',
                    title: '部门名称'
                }, {
                    field: 'num',
                    title: '部门人数',
                    sort: true
                }, {
                    field: 'createtime',
                    title: '成立日期'
                }, {
                    field: 'right',
                    title: '操作',
                    toolbar: "#barop",
                    width: 250
                }]]
        });
        //监听工具条
        table.on('tool(tbop)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('是否确认删除部门?', function (index) {
                    $.ajax({
                        url: "departdelete.do",
                        type: "POST",
                        data: "id=" + data.id,
                        success: function (data) {
                            if (data.code == 1000) {
                                obj.del();//删除表格中的对应行数据
                                layer.close(index);
                                window.location.reload()
                                layer.msg("删除成功", {
                                    icon: 6
                                });
                            } else {
                                layer.msg("删除失败", {
                                    icon: 5
                                });
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {//编辑 修改
                location.href = "departupdate.html?d="
                    + encodeURI(JSON.stringify(data));
            } else if (obj.event === 'detail') {//详情
                layer.open({
                    type: 2,
                    title: data.name + '的员工列表',
                    area: ['80%', '80%']
                    , content: 'stafflistbydid.html?d_id=' + data.id
                    , closeBtn: 1,
                    maxmin: true,
                    shadeClose: true
                });
            }
        });
    });
</script>
</body>
</html>